<template>
	<view class="content">
		<view class="tabbar" :style="{marginTop: boundRect_top + 'px'}">
			<view class="backView" @click="back()">
				<uni-icons type="arrowleft" size="24"></uni-icons>
				<text>返回</text>
			</view>
			<text class="tabTitle">成员管理</text>
			<!-- <view v-if="currentIsMaster" style="width: auto;height: 100%;margin-right: 27rpx;">
				<text v-if="!isEdit" class="editTxt" @click="edit()">编辑</text>
				<text v-else class="editTxt" @click="cancel()">取消</text>
			</view> -->
			<view style="width: 80rpx;height: 30rpx;margin-right: 27rpx;"></view>
		</view>
		<!-- 当前 是 主用户的界面 -->
		<view v-if="currentIsMaster">
			<view class="item" v-for="(item, index) in serviceUserList" :key="index">
				<view class="itemL">
					<image class="headImg" :src="item.headshot"></image>
					<text class="phone">{{ item.neckName }}</text>
				</view>
				<image v-if="isEdit" class="delImg" :src="staticUrl + '/image/mine/membermanage/icon_del.png'" @click="unBindUser(0,item.userId)"></image>
				<view v-if="!isEdit && item.userId == mainUserId" class="mainUser content">主用户</view>
			</view>
		</view>

		<!-- 子用户的界面 -->
		<view v-if="!currentIsMaster">
			<view class="item" v-for="(item, index1) in serviceUserList" :key="index1">
				<view class="itemL">
					<image class="headImg" :src="item.headshot"></image>
					<text class="phone">{{ item.neckName }}</text>
				</view>
				<image v-if="item.userId != mainUserId && item.userId == userId" class="delImg" :src="staticUrl + '/image/mine/membermanage/icon_del.png'" @click="unBindUser(1,item.userId)"></image>
				<view v-if="item.userId == mainUserId" class="mainUser content">主用户</view>
			</view>
		</view>

		<view class="item" v-if="serviceUserList.length < 3 && currentIsMaster" @click="addUser()">
			<view style="display: flex;align-items: center;">
				<image :src="staticUrl + '/image/mine/membermanage/addUser.png'" style="width: 100rpx;height: 100rpx;margin-left: 90rpx;"></image>
				<text class="addUser">添加或注册用户</text>
			</view>
		</view>
		<!-- 编辑icon -->
		<view class="editView" v-if="currentIsMaster">
			<view class="rectangle content">
				<text v-if="!isEdit" class="editTxt" @click="edit()">编辑</text>
				<text v-else class="editTxt" @click="cancel()">取消</text>
			</view>
			<view class="triangle"></view>
		</view>
		<!-- 说明 -->
		<view class="tips">
			<text>备注：</text>
			<text>1.首次绑定头环用户为主账号</text>
			<text>2.主账号可以删除其他子账号</text>
		</view>
	</view>
</template>

<script>
const app = getApp();
import * as api from '@/api/login';

export default {
	data() {
		return {
			boundRect_top:app.globalData.boundRect_top,
			staticUrl:this.$config.StaticUrl,
			phone: '',
			userId: null,
			isEdit: false, //是否是编辑模式（主用户）
			currentIsMaster: null, //当前登录用户是否是主用户
			serviceId: '', //服务id
			mainUserId: '', //主用户的userId
			serviceUserList: [] //已绑定的服务账户信息
		};
	},
	onLoad() {
		console.log('onload');
		this.userId = this.$store.state.userInfo.currentUser.userId;
		this.getServiceInfo();
		this.getServiceUserList();
	},
	methods: {
		// 返回事件
		back() {
			console.log('back');
			uni.switchTab({
				url: '../mine'
			});
		},
		// 主用户有编辑功能
		edit() {
			this.isEdit = true;
		},
		cancel() {
			this.isEdit = false;
		},
		// 获取服务信息
		getServiceInfo() {
			let that = this;
			let data = {
				userId: that.userId,
				action: 'getServiceInfo'
			};
			api.getServiceInfo(data)
				.then(function(res) {
					console.log('res', res);
					if (res.data.code == 2000) {
						that.mainUserId = res.data.data.masterUser;
						that.serviceId = res.data.data.serviceId;
						if (that.userId == res.data.data.masterUser) {
							console.log('当前是主用户');
							that.currentIsMaster = true;
						}
					}
				})
				.catch(function(error) {
					console.log('getServiceInfo fail', error);
				});
		},
		// 获取服务账户绑定的用户信息
		getServiceUserList(userId) {
			let that = this;
			let data = {
				userId: that.userId,
				action: 'getServiceUserList'
			};
			api.getServiceUserList(data)
				.then(function(res) {
					console.log('getServiceUserList res',res);
					if (res.data.code == 2000) {
						that.serviceUserList = res.data.data.serviceUserList;
					}
				})
				.catch(function(error) {
					console.log('getServiceUserList fail', error);
				});
		},
		// 解绑用户
		unBindUser(type,userId) {
			let that = this;
			let data = {
				userId: that.mainUserId,
				action: 'unbindService',
				params: {
					user: userId,
					serviceId: that.serviceId
				}
			};
			api.unbindService(data)
				.then(function(res) {
					console.log('unbindService res', res);
					if (res.data.code == 2000) {
						let userInfo = that.$store.state.userInfo;
						/*
						 * 删除 的后续处理
						 * 主用户解绑自己:删除所有缓存,退出到登录页
						 * 主用户解绑子用户:提示删除成功,页面不变,将缓存中子用户哪一项删除
						 * 子用户解绑自己:删除所有缓存,退出到登录页;
						 */
						// 主用户身份
						if(type == 0){
							if(userId == that.mainUserId){
								// 如果要删除的是主用户
								that.$toast('此操作不可逆 会删除缓存中得所有信息',{duration:3000});
								app.exitLogin();
							}else{
								// 主用户删除子用户
								userInfo.loginUserList.forEach((item,index) =>{
									if(userId == item.userId){
										console.log("主 -->> 子");
										// 将子用户信息给删除 重新提交到缓存中
										userInfo.loginUserList.splice(index,1);
										uni.setStorageSync('userInfo',userInfo);
										that.$store.commit('userInfo',userInfo);
										that.$toast('删除成功!');
									}
								})
							}
						}else if(type == 1){
							// 子用户身份 只能删除自己
							app.exitLogin();
						}
						that.getServiceUserList();
					} else {
						that.$toast('删除失败!',{icon:'error'});
					}
				}).catch(function(error) {
					console.log('unbindService fail', error);
				});
		},
		// 添加用户
		addUser() {
			uni.navigateTo({
				url: 'addUser/addUser'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fafafa;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tabbar {
	width: 750rpx;
	background-color: #fafafa;
	margin-top: calc(var(--status-bar-height));
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.backView {
	margin-left: 32rpx;
	height: 37rpx;
	display: flex;
	align-items: center;
}
.backView text {
	font-size: 40rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.tabTitle {
	font-size: 40rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.editView {
	margin-top: 30rpx;
	display: flex;
	width: 100%;
}
.rectangle {
	margin-left: 32rpx;
	width: 150rpx;
	height: 60rpx;
	background-color: #0659C7;
}
.triangle {
	width: 0;
	height: 0;
	border: 30rpx solid;
	border-color: transparent transparent transparent #0659C7;
}
.editTxt {
	font-size: 40rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #FFFFFF;
}
.item {
	margin-top: 40rpx;
	width: 700rpx;
	height: 160rpx;
	background-color: #ffffff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.itemL {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 90rpx;
}
.headImg {
	width: 100rpx;
	height: 100rpx;
}
.delImg {
	margin-right: 26rpx;
	width: 130rpx;
	height: 52rpx;
}
.phone {
	margin-left: 38rpx;
	font-size: 38rpx;
	font-family: Roboto;
	font-weight: bold;
	color: #333333;
}

.mainUser {
	width: 160rpx;
	height: 50rpx;
	background-color: #0659c7;
	border-radius: 50px 0 0 50px;
	color: #ffffff;
}
.addUser {
	margin-left: 38rpx;
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.tips {
	width: 650rpx;
	margin-top: 63rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.tips text {
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
</style>
